<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: simple</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/Message.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/iscroll.js" tppabs="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>

<script type="text/javascript">

var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;

function pullDownAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<10; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.insertBefore(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.appendChild(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: true,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手立刻刷新...';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上滑动加载更多...';
			}
		},
		onScrollMove: function () {
			if (this.y > 5 && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手立刻刷新...';
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
				this.minScrollY = -pullDownOffset;
			} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手立刻刷新...';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上滑动加载更多...';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';				
				pullDownAction();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

</head>
<body>

<header>
<a href="javascript:history.back();" style="float:left;margin-left:2%;"><img src="images/return.png" width="20" height="20"></a>
        <p>消息列表</p>
    <!-- 点击刷新本页面 -->
        <a href="#">
            <img src="images/Refresh.png" width="20" height="20"> </a>
</header>
<div id="wrapper">
	<div id="scroller">
		<div id="pullDown">
			<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
		</div>

		<ul id="thelist">
				<li>
                <section>
       <div class="list">
    <a href="message_detail.html">
       <div class="icon_tou">
             <img src="images/icon_tx001.png" width="70" height="70">
        </div>
    <ul>
            <li class="list_one">
                <h1>电商智慧宝</h1>
                     <span>3条未读</span> 
                               </li>
            <li class="list_tow">
<span>恭喜您,又卖出一件商品,获30元</span>
                </li>
    <li class="list_three">
        <span>2015-5-24</span><span>13:56:21</span> 
        </li>  
        </ul>
                </a>
             </div>         
        </section>  
            </li>
		<li>
                <section>
       <div class="list">
    <a href="message_detail.html">
       <div class="icon_tou">
             <img src="images/icon_tx001.png" width="70" height="70">
        </div>
    <ul>
            <li class="list_one">
                <h1>电商智慧宝</h1>
                     <span>3条未读</span> 
                               </li>
            <li class="list_tow">
<span>恭喜您,又卖出一件商品,获30元</span>
                </li>
    <li class="list_three">
        <span>2015-5-24</span><span>13:56:21</span> 
        </li>  
        </ul>
                </a>
             </div>         
        </section>  
            </li>
            <li>
                <section>
       <div class="list">
    <a href="message_detail.html">
       <div class="icon_tou">
             <img src="images/icon_tx001.png" width="70" height="70">
        </div>
    <ul>
            <li class="list_one">
                <h1>电商智慧宝</h1>
                     <span>3条未读</span> 
                               </li>
            <li class="list_tow">
<span>恭喜您,又卖出一件商品,获30元</span>
                </li>
    <li class="list_three">
        <span>2015-5-24</span><span>13:56:21</span> 
        </li>  
        </ul>
                </a>
             </div>         
        </section>  
            </li>
            <li>
                <section>
       <div class="list">
    <a href="message_detail.html">
       <div class="icon_tou">
             <img src="images/icon_tx001.png" width="70" height="70">
        </div>
    <ul>
            <li class="list_one">
                <h1>电商智慧宝</h1>
                     <span>3条未读</span> 
                               </li>
            <li class="list_tow">
<span>恭喜您,又卖出一件商品,获30元</span>
                </li>
    <li class="list_three">
        <span>2015-5-24</span><span>13:56:21</span> 
        </li>  
        </ul>
                </a>
             </div>         
        </section>  
            </li>
            <li>
                <section>
       <div class="list">
    <a href="message_detail.html">
       <div class="icon_tou">
             <img src="images/icon_tx001.png" width="70" height="70">
        </div>
    <ul>
            <li class="list_one">
                <h1>电商智慧宝</h1>
                     <span>3条未读</span> 
                               </li>
            <li class="list_tow">
<span>恭喜您,又卖出一件商品,获30元</span>
                </li>
    <li class="list_three">
        <span>2015-5-24</span><span>13:56:21</span> 
        </li>  
        </ul>
                </a>
             </div>         
        </section>  
            </li>
            <li>
                <section>
       <div class="list">
    <a href="message_detail.html">
       <div class="icon_tou">
             <img src="images/icon_tx001.png" width="70" height="70">
        </div>
    <ul>
            <li class="list_one">
                <h1>电商智慧宝</h1>
                     <span>3条未读</span> 
                               </li>
            <li class="list_tow">
<span>恭喜您,又卖出一件商品,获30元</span>
                </li>
    <li class="list_three">
        <span>2015-5-24</span><span>13:56:21</span> 
        </li>  
        </ul>
                </a>
             </div>         
        </section>  
            </li>
            <li>
                <section>
       <div class="list">
    <a href="message_detail.html">
       <div class="icon_tou">
             <img src="images/icon_tx001.png" width="70" height="70">
        </div>
    <ul>
            <li class="list_one">
                <h1>电商智慧宝</h1>
                     <span>3条未读</span> 
                               </li>
            <li class="list_tow">
<span>恭喜您,又卖出一件商品,获30元</span>
                </li>
    <li class="list_three">
        <span>2015-5-24</span><span>13:56:21</span> 
        </li>  
        </ul>
                </a>
             </div>         
        </section>  
            </li>
		</ul>
		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">向上滑动加载更多...</span>
		</div>
	</div>
</div>
</body>
</html>